<template>
<div>

  <el-row :gutter="10">

    <el-col :span="12">
      <el-card>
        <div style="width: 100%;height: 400px " id="pie"></div>
      </el-card>
    </el-col>

    <el-col :span="12">
      <el-card>
        <div style="width: 100%;height: 400px " id="bar"></div>
      </el-card>
    </el-col>

  </el-row>

</div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "employmentRate",
  data(){
    return{
      pieOption:{
        title: {
          text: '就业率',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data:[],//后端获取
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      barOption:{
        title: {
          text: '各专业就业人数'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }},
        xAxis: {
          data: []  //后端获取
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '人数',
          type: 'bar',
          data: []  ,//后端获取
          barWidth: '40%',
        }]
      }
    }
  },
  methods:{
    init(id,option){
      // 初始化ECharts实例  并设置option
      let Dom = document.getElementById(id)
      let Chart = echarts.init(Dom)
      Chart.setOption(option)
    },
    getPieData(){
      this.$axios({
        url:'/api/track/countEmploy',
        method:'get',
        headers:{
          'Authorization':this.$cookies.get('token')
        }
      }).then(res =>{
        this.pieOption.series[0].data = res.data.data
        this.init('pie',this.pieOption)
        // console.log(this.pieOption.series[0].data)
      })

    },

    getBarData(){
      //获取x轴数据
      this.$axios({
        url:'/api/track/allMajorList',
        method:'get',
        headers:{
          'Authorization':this.$cookies.get('token')
        }
      }).then(res =>{
        this.barOption.xAxis.data = res.data.data
        this.init('bar',this.barOption)
        // console.log(this.barOption.xAxis.data)
      })
      //获取y轴数据
      this.$axios({
        url:'/api/track/countInMajor',
        method:'get',
        headers:{
          'Authorization':this.$cookies.get('token')
        }
      }).then(res =>{
        this.barOption.series[0].data = res.data.data
        this.init('bar',this.barOption)
        // console.log(this.barOption.series[0].data)
      })
      console.log(this.barOption)

    }
  },
  mounted() {//等待页面元素加载完成后初始化

  },
  created() {
    this.getPieData()
    this.getBarData()

  }
}
</script>

<style scoped>

</style>
